<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String ctx = request.getContextPath();
    request.setAttribute("ctx", ctx);
%>
<html>
<head>
    <title>Title</title>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/fileupload.js"></script>
    <script src="My97DatePicker/WdatePicker.js"></script>
    <link rel="stylesheet" href="css/img.css">
    <script>

        // 就绪函数
        $(function (){
            //课程ajax加载
            $.ajax({
                async:false,
                url:"courseList.do",
                success:function (obj){
                for (let x in obj) {
                    $("#courses").append(" <input type='checkbox' name='cids' value="+obj[x].cid+">"+obj[x].cname)
                }
                },
                dataType:"json",
                type:"post"})

            // 回显
            $.ajax({
                async:false,
                url:"getInfoBySid.do",
                data:{"sid":$("[name='sid']").val()},
                type:"post",
                dataType:"json",
                success:function (obj){
                    $("[name='sname']").val(obj.sname);
                    $(".photoEcho").prop("src",obj.pic);
                    $("[name='sex'][value='"+obj.sex+"']").prop("checked",true);
                    var hobbys=obj.hobby.split(",")
                    for(var i in hobbys){
                        $("[name='hobby'][value='"+hobbys[i]+"']").prop("checked",true);
                    }
                    $("[name='birthday']").val(obj.birthday);
                    $("[name='sheng_id']").val(obj.sheng);
                    $("[name='shi_id']").val(obj.shi);
                    $("[name='xian_id']").val(obj.xian);
                    var cids=obj.cids.split(",")
                    for(var i in cids){
                        $("[name='cids'][value='"+cids[i]+"']").prop("checked",true);
                    }
                }
            })

            $.post(
                "cityList.do",
                {"pid":0},
                function (obj){
                    for(var i in obj){
                        if(obj[i].id==$("[name=sheng_id]").val()){
                            $("[name='sheng.id']").append(" <option value="+obj[i].id+" selected>"+obj[i].name+"</option>")
                            $("[name='sheng.id']").trigger("change");
                        }else{
                            $("[name='sheng.id']").append(" <option value="+obj[i].id+">"+obj[i].name+"</option>")
                        }

                    }
                },"json");

            $("[name='sheng.id']").change(function (){
                var pid=$(this).val();
                $("[name='shi.id']").empty();
                $("[name='shi.id']").append("<option value=''>请选择</option>");
                $("[name='xian.id']").empty();
                $("[name='xian.id']").append("<option value=''>请选择</option>");
                $.post(
                    "cityList.do",
                    {"pid":pid},
                    function (obj){
                        for(var i in obj){
                            if(obj[i].id==$("[name='shi_id']").val()){
                                $("[name='shi.id']").append(" <option value="+obj[i].id+" selected>"+obj[i].name+"</option>")
                                $("[name='shi.id']").trigger("change");
                            }else {
                                $("[name='shi.id']").append(" <option value="+obj[i].id+">"+obj[i].name+"</option>")
                            }

                        }
                    },"json");
            })

            $("[name='shi.id']").change(function (){
                var pid=$(this).val();
                $("[name='xian.id']").empty();
                $("[name='xian.id']").append("<option value=''>请选择</option>");
                $.post(
                    "cityList.do",
                    {"pid":pid},
                    function (obj){
                        for(var i in obj){
                            if(obj[i].id==$("[name=xian_id]").val()){
                                $("[name='xian.id']").append(" <option value="+obj[i].id+" selected>"+obj[i].name+"</option>")
                            }else {
                                $("[name='xian.id']").append(" <option value="+obj[i].id+">"+obj[i].name+"</option>")
                            }

                        }
                    },"json");
            })
        })

        function upd(){
            // jQuery=》 隐式迭代集合
            var formData = new FormData($('form')[0]);
            $.ajax({
                url:"upd.do",
                data:formData,
                type:"post",
                dataType:"json",
                success:function (obj){
                    if(obj>0){
                        location="list.do";
                    }
                },
                processData: false,
                contentType:false
            })
        }
    </script>
</head>
<body>
    <form >
            <input type="hidden" name="sid" value="${param.sid}">
            <input type="hidden" name="sheng_id" >
            <input type="hidden" name="shi_id">
            <input type="hidden" name="xian_id">
        姓名:<input type="text" name="sname"><br>
        头像：   <div class="photoUpLoad" >
                    <input type="file"   class="photo" name="photo" accept="image/*"><span class="cross">+</span>
                    <img src="" alt="" class="photoEcho">
                </div><br>
        <br>
        性别:<input type="radio" name="sex" value="男">男
            <input type="radio" name="sex" value="女">女<br>
        爱好：<input type="checkbox" name="hobby" value="抽烟">抽烟
            <input type="checkbox" name="hobby" value="喝酒">喝酒
            <input type="checkbox" name="hobby" value="烫头">烫头<br>
        生日：<input type="text" name="birthday" onclick="WdatePicker()"><br>
        籍贯:<select name="sheng.id">
                <option value="">请选择</option>
            </select>省
            <select name="shi.id">
                <option value="">请选择</option>
            </select>市
            <select name="xian.id">
                <option value="">请选择</option>
            </select>区(县)<br>

        科目:<div id="courses">

            </div><br>
        <input type="button" value="修改" onclick="upd()">
    </form>
</body>
</html>
